<template>
  <div>
      <!-- 多色icon -->
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-meiduan"></use>
    </svg>


    <!-- 单色icon -->
     <button class="iconfont icon-meiduan"></button>


     <!-- 轮播图组件 -->
    <Swipe :list="imgs" />


    <!-- 表单组件 -->
    <From :list="lista" @Submit="Submit" />
  </div>
</template>

<script>
import From from "./case.vue";
import Swipe from "./swipe.vue";
export default {
  components: {
    From,
    Swipe,
  },
  data() {
    return {
        //表单目前仅支持下列常用组件
        //所有表单组件支持rules校验
      lista: [
        {
          type: "input",//表单类型 输入框
          label: "姓名",//表单label
          name: "name",//表单名称 返回时name为key名
          password: "请输入姓名", //表单password
          value: "",//表单输入内容 返回时为key值
          disabled: false, //表单是否禁用 true为禁用 不传默认值为false
          id:"1"
        },
        {
          type: "password",//表单类型密码框
          label: "密码",
          password: "密码",
          name: "password",
          value: "",
          rules: [{ required: true, message: "请填写密码" }],
          id:"2"
        },
        {
          type: "switch",//表单类型为开关 
          flag: true,//开关vant封装为插槽 true开启插槽 必传true
          label: "开关",
          name: "switch",
          value: true,//开关值 true为开 false为关闭
          id:"3"
        },
        {
          type: "checkbox", //多选类型
          flag: true,//必传
          label: "复选框",
          name: "checkboxs",
          value: [],//多选返回值 返回值为checkListname值（返回数组）
          id:"4",
          checkList: [ 
            {
              name: "1",
              valueName: "复选框1",
              id:"5"
            },
            {
              name: "2",
              valueName: "复选框2",
              id:"6"
            },
          ],
        },
        {
          type: "radio",//单选框
          flag: true,//必传
          label: "单选框",
          name: "radios",
          value: "",//单选框返回值为checkList name
          id:"7",
          checkList: [
            {
              name: "1",
              valueName: "单选框1",
              id:"8"
            },
            {
              name: "2",
              valueName: "单选框2",
              id:"9"
            },
          ],
        },
        {
          type: "picker", //弹出框搭配选择器
          flag: true,//必传
          label: "选择器",
          name: "pickers",
          value: "", //选择器为单选 返回值为pickerList  value
          placeholder: "请选择城市1",
          id:"10",
          rules: [{ required: true, message: "请填写账号" }],
          pickerList: [
            {
              text: "大连",//选择器显示文字
              value: "大连1",//选择器返回文字
              id:"11"
            },
            {
              text: "沈阳",
              value: "沈阳1",
              id:"12"
            },
          ],
        },
      ],
      imgs: {
        vertical: true,//true 轮播为纵向 false为横向
        autoplay: 1000,//轮播时间 1000为一秒
        flag: true, //true更改轮播按钮  false为默认按钮
        id:"13",
        img: [//轮播图内图片内容
          {
            id:"14",
            img: "https://img.lanrentuku.com/img/allimg/1212/5-121204193Q8.gif",
          },
          {
            img: 2,
            id:"15"
          },
          {
            img: 3,
            id:"16"
          },
          {
            img: 4,
            id:"17"
          },
        ],
      },
    };
  },
  methods: {
    Submit(data) {
      console.log(data, "data");
    },
  },
};
</script>

<style>
.icon {
  width: 50px;
  height: 50px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.iconfonts {
  font-size: 100rpx;
}
img[lazy="loading"]{
  display:block;
  width:100% !important;
  height:200px !important;
  margin:0 auto;
  }
  img{
    width: 100%;
    height: 200px;
  }
</style>


